<%-- 
    Document   : example2
    Created on : May 19, 2011, 1:53:04 PM
    Author     : DSokolov
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Second Example</title>
        
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
<!--        <script src="js/dojo/dojo/dojo.js"></script>-->
        <script>
            //dojo.byId
            var cahngeOne = function() {
                var one = dojo.byId("one");
                one.innerHTML = "Now it isn't one";
            };
            
            var backOne = function() {
               setText(dojo.byId("one"), "One");
            };
            
            var setText = function(node, text){
                //Can accept also DOM Object
                node = dojo.byId(node);
                node.innerHTML = text;
            };
            
            //dojo.create
            var elmentsIsCreated = false;
            
            var createElements = function() {
                if(elmentsIsCreated) {
                    alert("You already have created  elemets!");
                    return;
                }
                var list = dojo.byId("list");
                console.log("1");
                dojo.create("li", {
                    innerHTML: "Six",
                    id: "six"
                }, list);
                dojo.create("li", {
                    innerHTML: "Seven",
                    className: "seven",
                    style: {
                        fontWeight: "bold"
                    },
                    id : "seven"
                }, list);
                dojo.create("p", {
                    innerHTML: "Paragraf after list",
                    id: "afterP"
                }, list, "after");
                elmentsIsCreated = true;
            };
            
            //dojo.place
            function moveFirst(){
                var list = dojo.byId("list"),
                three = dojo.byId("three");
                dojo.place(three, list, "first");
            }

            function moveBeforeTwo(){
                var two = dojo.byId("two"),
                three = dojo.byId("three");
                dojo.place(three, two, "before");
            }

            function moveAfterFour(){
                var four = dojo.byId("four"),
                three = dojo.byId("three");
                dojo.place(three, four, "after");
            }

            function moveLast(){
                var list = dojo.byId("list"),
                three = dojo.byId("three");
                dojo.place(three, list);
            }
            
            //dojo.destroy
            function destroyElements() {
                if(!elmentsIsCreated) {
                    alert("There are no elemets to destroy!");
                    return;
                }
                dojo.destroy(dojo.byId("six"));
                dojo.destroy(dojo.byId("seven"));
                dojo.destroy(dojo.byId("afterP"));
                elmentsIsCreated = false;
            }
            
            //dojo.empty
            function emptyList() {
                dojo.empty("list");
            }
            
            
            
        </script>
        
        <style>
            #three {
                background:#e3e3e3;
            }
        </style>
        
        
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <h1>The Second Example of DOJO</h1>
                    <p>This example covers these aspects:</p>
                    <ul>
                        <li>dojo.byId</li>
                        <li>dojo.create</li>
                        <li>dojo.place</li>
                        <li>dojo.destroy</li>
                    </ul>
            
            
                    <br />
                    <p> 1) dojo.byId<br/>
                        <a href="#" onclick="cahngeOne();">Change One</a><br/>
                        <a href="#" onclick="backOne();">Back one</a>
                    </p>
            
                    <p> 2) dojo.create<br/>
                        <a href="#" onclick="createElements();">Create new elements</a><br/>
                    </p>
                    
                    <p> 3) dojo.place<br/>
                        <a href="#" onclick="moveFirst();">The first item</a><br/>
                        <a href="#" onclick="moveBeforeTwo();">Before Two</a><br/>
                        <a href="#" onclick="moveAfterFour();">After Four</a><br/>
                        <a href="#" onclick="moveLast();">The last item</a>
                    </p>
                    <p> 4) dojo.destroy<br/>
                        <a href="#" onclick="destroyElements();">Delete elements</a><br/>
                    </p>    
                    
                    <p> 5) dojo.empty<br/>
                        <a href="#" onclick="emptyList();">Erase List</a><br/>
                    </p> 
                </td>
                <td>
                               
                    <ul id="list">
                        <li id="one">One</li>
                        <li id="two">Two</li>
                        <li id="three">Three</li>
                        <li id="four">Four</li>
                        <li id="five">Five</li>
                    </ul>
                </td>
            </tr>
        </table>
    </body>
</html>
